<template>
  <view class="recruit_plan-page" :style="objColor">
    <!-- marketing/pages/promotion/recruit_plan/recruit_plan.wxml -->

    <view class="recruit_plan">
      <view class="box">
        <view class="box_title flex-row-start">
          <text>什么是推广员?</text>
          <image
            class="bg"
            src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"
          ></image>
        </view>
        <view class="explain_wrap">
          <view class="title">说明</view>
          <view class="desc"
            >成为推广员，推广新用户注册，升级后可获得推广奖励。等级越高，奖励越多</view
          >
        </view>

        <view class="explain_wrap">
          <view class="title">特点</view>
          <view class="desc">准入门槛低，操作简单。</view>
        </view>
      </view>

      <view class="box">
        <view class="box_title flex-row-start">
          <text>如何成为推广员？</text>
          <image
            class="bg"
            src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"
          ></image>
        </view>
        <view class="icon_tab flex-row-between">
          <block v-for="(item, index) in dots" :key="index">
            <view class="icon_tab_item flex-column-start">
              <image
                class="icon"
                :src="
                  'https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/' +
                  (index + 1) +
                  '.png'
                "
              ></image>
              <view class="title">{{ item.title }}</view>
              <view class="dot" v-if="index != dots.length - 1"></view>
            </view>
          </block>
        </view>
      </view>
      <!-- 热门任务 -->
      <!-- :style="{ backgroundImage: 'url(' + boxBgURL + ')' }" -->
      <view
        class="hotTask"
        
      >
      <!-- @tap="toNewPage('inviteNewUpgrades')" -->
        <view class="task1" @tap="toRules()">
          <view>
            <image :src="taskImg1"></image>
          </view>
          <view>
            <view style="color: #f4621a">邀新升级</view>
            <view style="color: #a74312"
              >邀请新用户，升级推广等级获取不同等级奖励</view
            >
          </view>
          <u-icon name="arrow-right" color="#A74312" size="28"></u-icon>
        </view>
        <!-- <view class="task2"  @tap="toNewPage('pullNewConsumption')">
          <view>
            <image :src="taskImg2"></image>
          </view>
          <view>
            <view style="color: #f0623a">拉新消费</view>
            <view style="color: #c1411e">邀请新用户，完成首次消费获得奖励</view>
          </view>
          <u-icon name="arrow-right" color="#C1411E" size="28"></u-icon>
        </view> -->
        <!-- <view class="task3"  @tap="toNewPage('firstConsumption')">
          <view>
            <image :src="taskImg3"></image>
          </view>
          <view>
            <view style="color: #228cf6">首月消费</view>
            <view style="color: #1b65af"
              >邀请新用户，新用户首月消费根据梯度，
              获得现金奖励，消费越多奖励越多</view
            >
          </view>
          <u-icon name="arrow-right" color="#1B65AF" size="28"></u-icon>
        </view> -->
      </view>
      <!-- <view class="box" v-if="ruleInfo.length">
        <view class="recruit_class">
          <view
            class="recruit_class_item"
            v-for="(item, index) in ruleInfo"
            :key="index"
          >
            <view class="title_wrap flex-row-start">
              <view class="level">LV{{ item.spreadLevelId }}</view>
              <view class="title">{{ item.spreadLevelName }}</view>
            </view>

            <view class="desc">
              准入门槛：累计推广
              <text>{{ item.needSpreadStartNum }}</text>
              人，即可升级。
            </view>

            <view class="card_wrap flex-row-start flex_wrap">
              <view
                class="card_item flex-column-evenly"
                v-if="item.totalCouponMoney"
              >
                <image
                  class="bg"
                  src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"
                ></image>
                <view class="title">￥{{ item.totalCouponMoney }}</view>
                <view class="btn flex-row-center">
                  <image
                    class="btn_frame"
                    src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"
                  ></image>
                  <view>优惠券</view>
                </view>
              </view>
              <view
                class="card_item flex-column-evenly"
                v-if="item.rewardIntegral"
              >
                <image
                  class="bg"
                  src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"
                ></image>
                <view class="title">{{ item.rewardIntegral }}分</view>
                <view class="btn flex-row-center">
                  <image
                    class="btn_frame"
                    src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"
                  ></image>
                  <view>积分</view>
                </view>
              </view>
              <view
                class="card_item flex-column-evenly"
                v-if="item.serveFreeTimes"
              >
                <image
                  class="bg"
                  src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"
                ></image>
                <view class="title">{{ item.serveFreeTimes }}次</view>
                <view class="btn flex-row-center">
                  <image
                    class="btn_frame"
                    src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"
                  ></image>
                  <view>免服务费次数</view>
                </view>
              </view>
              <view
                class="card_item flex-column-evenly"
                v-if="item.rewardAmount"
              >
                <image
                  class="bg"
                  src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"
                ></image>
                <view class="title">{{ item.rewardAmount }}元</view>
                <view class="btn flex-row-center">
                  <image
                    class="btn_frame"
                    src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"
                  ></image>
                  <view>奖励金</view>
                </view>
              </view>
            </view>
          </view>
          <view class="recruit_class_desc" v-if="reduceInfo.isDownLimit === 1">
            <text>注：</text>
            {{ reduceInfo.days }}天未推广新用户，则推广等级下降一级。
          </view>
        </view>
      </view> -->
    </view>
    <view style="height: 120rpx"></view>

    <view class="btn_wrap flex-row-center">
      <view class="btn flex-row-center" @tap="goPage">
        {{
          detailInfo.auditStatus == 0
            ? "查看审核详情"
            : detailInfo.auditStatus === 2
            ? "查看原因并重新申请"
            : "立即申请"
        }}
      </view>
    </view>

    <!-- 提示 -->
    <view class="tips flex-row-start" v-if="detailInfo.auditStatus === 2">
      <image
        class="icon"
        src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/tips1.png"
      ></image>
      <view class="text">您的推广员申请审核不通过，请修改后重新申请</view>
    </view>

    <view
      class="tips tips_bg1 flex-row-start"
      v-if="detailInfo.auditStatus == 0"
    >
      <image
        class="icon"
        src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/tips2.png"
      ></image>
      <view class="text">您的推广员申请正在审核中，请耐心等待</view>
    </view>
  </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// marketing/pages/promotion/recruit_plan/recruit_plan.ts

// import { getRule, getReduceRule, auditDetail } from '../../../../api/marketing/promotion';
var promotion_1 = require("../../../../api/marketing/promotion");
const { getRule, getReduceRule, auditDetail } = promotion_1;
var app = getApp();
export default {
  data() {
    return {
      boxBgURL: app.globalData.imgUrl+'/group1/operateSchemeImage/image/bg.png',
      taskImg1: app.globalData.imgUrl+'/group1/operateSchemeImage/image/Illustration_1.png',
      taskImg2: app.globalData.imgUrl+'/group1/operateSchemeImage/image/Illustration_2.png',
      taskImg3: app.globalData.imgUrl+'/group1/operateSchemeImage/image/Illustration_3.png',
      dots: [
        {
          title: "提交申请",
        },
        {
          title: "审核通过",
        },
        {
          title: "邀请新用户",
        },
        {
          title: "获得奖励",
        },
      ],
      ruleInfo: {},
      reduceInfo: {
        isDownLimit: 0,
      },
      detailInfo: { auditStatus: 200 },
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.getRuleDetial();
    this.getReduceRuleDetail();
  },
  onShow() {
    if (uni.getStorageSync("applySuccess")) {
      uni.showToast({
        title: "推广员申请提交成功，请耐心等待审核！",
        icon: "none",
        duration: 3000,
      });
      uni.setStorageSync("applySuccess", "");
    }
    this.getAuditDetail();
  },
  methods: {
    //推广规则
    toRules() {
      uni.navigateTo({
        url: '../rules_details/rules_details'
      });
    },

    toNewPage(val){
        console.log(val)
        uni.navigateTo({
          url: `/marketing_page/pages/promotion/recruit_plan/${val}`,
        });
    },
    goPage() {
      console.log(this.detailInfo.auditStatus);
      if (this.detailInfo.auditStatus != 200) {
        uni.navigateTo({
          url: "/marketing_page/pages/promotion/apply/details",
        });
      } else {
        uni.navigateTo({
          url: "/marketing_page/pages/promotion/apply/apply",
        });
      }
    },

    async getAuditDetail() {
      auditDetail({
        plUserId: uni.getStorageSync("memberId"),
      }).then((res) => {
        const { code, data }: any = res;
        // console.log(res, data, "这是还说呢么叒");
        // 审核状态：0：待审核；1：审核通过；2：审核拒绝
        if (code == 200) {
          this.setData({
            detailInfo: data || { auditStatus: 200 },
          });
        }
      });
    },

    async getReduceRuleDetail() {
      const { code, data }: any = await getReduceRule().catch((error) => {});
      if (code === 200) {
        this.setData({
          reduceInfo: data || {},
        });
      }
    },

    async getRuleDetial() {
      const { code, data }: any = await getRule().catch((error) => {});
      if (code === 200) {
        const ruleInfo = data.map((item: any) => {
          if (item.marketCouponOptionApplies?.length > 0) {
            item.totalCouponMoney = item.marketCouponOptionApplies
              .map((cItem: any) => cItem.amount * cItem.totalReceiveCount)
              .reduce(
                (pre: number, cur: number) => Number((pre + cur).toFixed(1)),
                0
              );
          } else {
            item.totalCouponMoney = null;
          }
          return item;
        });
        this.setData({
          ruleInfo,
        });
      }
    },
  },
};
</script>
<style>
page {
  background-color: #eff2f5;
  position: relative;
  padding-bottom: 120rpx;
}
</style>
<style lang="less" scoped>
/* marketing/pages/promotion/recruit_plan/recruit_plan.wxss */
@import "../../../../commin/flex.less";
.recruit_plan-page {
  height: 100%;
}
.recruit_plan {
  padding: 16rpx 24rpx 0;
}
.recruit_plan .recruit_class_desc {
  font-size: 20rpx;
  color: #909399;
  margin-top: 40rpx;
}
.recruit_plan .recruit_class_desc text {
  color: #fc724c;
}
.recruit_plan .box {
  background: linear-gradient(0deg, #ffffff, #f4f6f8);
  box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
  border-radius: 16rpx;
  padding: 0 32rpx 40rpx 32rpx;
  margin-bottom: 16rpx;
  border: 2rpx solid #ffffff;
}
.recruit_plan .box_title {
  width: 341rpx;
  height: 90rpx;
  position: relative;
  left: -38rpx;
  top: -10rpx;
}
.recruit_plan .box_title text {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  position: absolute;
  z-index: 1;
  margin-left: 38rpx;
}
.recruit_plan .box_title .bg {
  width: 100%;
  height: 100%;
  position: absolute;
}
.recruit_plan .icon_tab {
  margin-top: 34rpx;
}
.recruit_plan .icon_tab .icon_tab_item {
  position: relative;
}
.recruit_plan .icon_tab .icon_tab_item .title {
  font-size: 26rpx;
  font-weight: 500;
  color: #606266;
}
.recruit_plan .icon_tab .icon_tab_item .icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 16rpx;
}
.recruit_plan .icon_tab .icon_tab_item .dot {
  width: 12rpx;
  height: 12rpx;
  background: #fab9a7;
  border-radius: 50%;
  position: absolute;
  top: 33%;
  right: -35rpx;
}
.recruit_plan .icon_tab .icon_tab_item .dot::after {
  position: absolute;
  left: 20rpx;
  width: 9rpx;
  height: 9rpx;
  background: #dadfe3;
  border-radius: 50%;
  content: "";
  top: 50%;
  transform: translateY(-50%);
}
.recruit_plan .icon_tab .icon_tab_item .dot::before {
  position: absolute;
  content: "";
  right: 20rpx;
  width: 9rpx;
  height: 9rpx;
  background: #dadfe3;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.recruit_plan .explain_wrap {
  margin-top: 40rpx;
}
.recruit_plan .explain_wrap .title {
  font-size: 30rpx;
  font-weight: bold;
  color: #303133;
  margin-bottom: 23rpx;
}
.recruit_plan .explain_wrap .desc {
  font-size: 24rpx;
  color: #909399;
}
.recruit_plan .recruit_class .recruit_class_item {
  border-bottom: 1rpx dotted #c0c4cc;
  padding-bottom: 20rpx;
}
.recruit_plan .recruit_class .recruit_class_item .title_wrap {
  padding-top: 40rpx;
}
.recruit_plan .recruit_class .recruit_class_item .title_wrap .level {
  font-size: 34rpx;
  font-weight: bold;
  color: #ad6030;
  margin-right: 24rpx;
}
.recruit_plan .recruit_class .recruit_class_item .title_wrap .title {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ad6030;
}
.recruit_plan .recruit_class .recruit_class_item .desc {
  font-size: 20rpx;
  font-weight: 500;
  color: #909399;
  line-height: 36px;
  margin-bottom: 10rpx;
}
.recruit_plan .recruit_class .recruit_class_item .desc text {
  color: #fc724c;
}
.recruit_plan .recruit_class .recruit_class_item .card_item {
  position: relative;
  width: 202rpx;
  height: 192rpx;
  z-index: 1;
  margin-right: 15rpx;
  margin-bottom: 24rpx;
}
.recruit_plan .recruit_class .recruit_class_item .card_item:nth-child(3) {
  margin-right: 0;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .title {
  font-size: 30rpx;
  font-weight: bold;
  color: #fc724c;
  line-height: 40rpx;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .btn {
  position: relative;
  width: 182rpx;
  height: 65rpx;
  font-size: 22rpx;
  font-weight: 500;
  color: #a14b20;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .btn .btn_frame {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.btn_wrap {
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  margin-top: 40rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.btn_wrap .btn {
  width: 686rpx;
  height: 88rpx;
  background: var(--btnColor);
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #ffffff;
}
.tips {
  padding: 0 42rpx;
  position: fixed;
  top: var(--window-top);
  width: 100%;
  z-index: 3;
  background: rgba(144, 147, 153, 0.9);
  height: 80rpx;
}
.tips .icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 27rpx;
}
.tips .text {
  font-size: 28rpx;
  color: #ffffff;
}
.tips_bg1 {
  background: #f7a14a;
  background: rgba(247, 161, 73, 0.8);
}
.hotTask {
  width: 100%;
  background-size: 106% 100%;
  background-repeat: no-repeat;
  background-position: center;
  // padding: 100rpx 32rpx 70rpx 32rpx;
  padding: 32rpx 0;
  box-sizing: border-box;
  > view {
    width: 100%;
    height: 160rpx;
    border-radius: 16rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 24rpx 26rpx;
    box-sizing: border-box;
    > view:nth-of-type(1) {
      width: 102rpx;
      height: 108rpx;
      border-radius: 16rpx;
      image {
        width: 75rpx;
        height: 75rpx;
      }
    }
    > view:nth-of-type(2) {
      flex: 1;
      height: 108rpx;
      padding: 5rpx 20rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      > view:nth-of-type(1) {
        font-size: 34rpx;
      }
      > view:nth-of-type(2) {
        font-size: 24rpx;
      }
    }
  }
  .task1 {
    background: linear-gradient(90deg, #f7e4d9 0%, #fc8145 100%);
    > view:nth-of-type(1) {
      background-color: #f6ad89;
    }
  }
  .task2 {
    margin-top: 16rpx;
    background: linear-gradient(90deg, #ffe3e3 0%, #f77c5c 100%);
    > view:nth-of-type(1) {
      background-color: #f7aba1;
    }
  }
  .task3 {
    margin-top: 16rpx;
    background: linear-gradient(90deg, #c9e2fc 0%, #56a7f8 100%);
    > view:nth-of-type(1) {
      background-color: #7bb9f9;
    }
  }
}
</style>
